import React, { Component } from 'react';
import BasePage from "@/components/Layout/BasePage";

import { addDaftarHadirPeserta } from '../../../actions/catatan';
import { getAutoSave } from "@/actions/autosave";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import SignatureCanvas from 'react-signature-canvas'
import { addPesertaPleno } from '../../../actions/public';
import { toast } from "react-toastify";
import Router from "next/router";
import swal from "sweetalert2";
import Link from 'next/dist/client/link';
import moment from 'moment';
import { getOneCatatan } from '../../../actions/catatan';
import ContentEditable from 'react-contenteditable'






class PlenoSanksi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataLaporan: {},
            modal: false,
            signature: "",
            nama: "",
            data: {},
            changesign: false,
            pageDone: false,

        }
    }
    static getInitialProps = async ({ query }) => {
        return { query };

    };

    componentDidMount = async () => {
        const { token, query } = this.props;
        const { id } = query;
        const getCatatan = await getOneCatatan(token, id)
        const pt = getCatatan.data?.isi.pt;
        const catatan = getCatatan.data
        const judul = getCatatan.data.judul
        const tempat = catatan.isi.tempat
        const setTanggal = catatan.isi.setTanggal
        const isi = catatan.isi.isi
        const tanggal = catatan.isi.tanggal
        const isEditTanggal = catatan.isi.isEditTanggal
        const isEditTempat = catatan.isi.isEditTempat
        const simpulan = catatan.isi.simpulan
        const rekomendasi = catatan.isi.rekomendasi
        this.setState({ isi, catatan, judul, pt, tanggal, tempat, isEditTanggal, isEditTempat, simpulan, rekomendasi, setTanggal });
    };

    toggleModal = (value = true) => {
        if (!value) {
            this.setState({ modal: false });
        } else {
            this.setState({ modal: !this.state.modal });
        }
    };
    sigPad = []
    clear = () => {
        this.sigPad.clear()
    }
    updateValueSignature = () => {
        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
        this.setState({
            signature: addsig,
            changesign: true

        })
    }

    updateValueNama = (e) => {
        this.setState({ nama: e.target.value });
    }


    onSubmit = async (e) => {

        const { query, token } = this.props;
        const { id } = query;
        const sign = this.state.signature
        const blob = await (await fetch(sign)).blob();
        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
        const formdata = new FormData();
        formdata.append("ttd", files);
        formdata.append("catatan_id", id);
        formdata.append("nama", this.state.nama);
        const added = await addDaftarHadirPeserta(token, formdata, id);
        const toastid = toast.loading("Please wait...");
        if (!added) {
            swal.fire({
                title: "Gagal Input Tanda Tangan",
                icon: "error",
                confirmButtonColor: "#3e3a8e",
            });

        } else {
            swal.fire({
                title: "Berhasil Input Tanda Tangan",
                icon: "success",
                confirmButtonColor: "#3e3a8e",
            });
            Router.push(`/signature/letter/done/${id}`);
        }
    };




    render() {
        const { signature, nama, changesign, catatan, pt, isEditTanggal, tanggal } = this.state

        return (
            <ContentWrapper unwrap>
                <Modal isOpen={this.state.modal} >

                    <ModalBody>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Nama:<span className=' text-danger'>*</span></label>
                            <div className="col-md-10">
                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
                            </div>
                        </FormGroup>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Tanda Tangan:</label>
                            <div className="col-md-10">
                                <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />
                            </div>
                        </FormGroup>
                        <ModalFooter>
                            <Button color className="btn-login" onClick={this.updateValueSignature
                            }>
                                <span className="font-color-white">Simpan</span>
                            </Button>
                            <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
                                Hapus
                            </Button>
                        </ModalFooter>
                        <ModalFooter>
                            <Button color className="bg-danger" onClick={this.toggleModal}>
                                Batal
                            </Button>
                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className=" color-3e3a8e" onClick={this.onSubmit}>
                                <span className="font-color-white ">Kirim</span>
                            </Button>

                        </ModalFooter>

                    </ModalBody>
                </Modal>

                <div className='page-sign'>
                    <div className='BA-Header'>
                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                        <h4 >LAPORAN HASIL VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</h4>
                        {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
                    </div>
                    <div className='BA-body px-5 pt-3 '>
                        <p>
                            Pada hari ini
                            <span style={{ textIndent: "0rem" }}>
                                {isEditTanggal &&
                                    <span style={{ textIndent: "0rem" }}>
                                        <Datetime
                                            timeFormat={false}
                                            inputProps={{ className: "form-control" }}
                                            value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
                                            onChange={(tanggal) => {
                                                this.setState({ tanggal, setTanggal: true })
                                            }}
                                            closeOnSelect={true}

                                        />

                                    </span>
                                }
                            </span>
                            {this.state?.setTanggal === true ?
                                <span > {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(tanggal || this.state?.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
                                <span ><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                            }
                            &nbsp;bertempat di
                            {this.state.isEditTempat &&
                                <span>
                                    <input type='text'
                                        defaultValue={""}
                                        ref="inputTempat"
                                        onChange={() => {
                                            this.setState({ tempat: this.refs.inputTempat.value })
                                        }}
                                    />

                                </span>
                            }
                            {this.state?.tempat ?
                                <span className='hhh'>
                                    &nbsp;{this.state?.tempat}
                                </span>
                                :
                                <span ><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                            }

                            ,
                            telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
                            <ol>
                                {catatan?.daftar_kehadiran_peserta?.map((value) =>
                                    <li>
                                        {value.nama}
                                        {/* <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
                                            onClick={() => {
                                                this.setState({
                                                    selectedPeserta: value._id
                                                })
                                                this.setModalRemovePeserta()
                                            }} /> */}
                                    </li>)}
                            </ol>
                        </p>
                        <div className='table-a my-4 pl-5 pr-5' >
                            <table className=' ml-auto mr-auto'>
                                <thead >
                                    <tr>
                                        <th >NO</th>
                                        <th>ASPEK PERBAIKAN</th>
                                        <th >LAPORAN PERBAIKAN</th>
                                        <th >HASIL VERIFIKASI DAN VALIDASI</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.isi?.map((isi, index) => (
                                        <tr key={index}>
                                            <td>{index + 1}</td>

                                            <td style={{ width: "30%" }}>
                                                <ContentEditable
                                                    html={isi.Aspek_Perbaikan}
                                                    onChange={(evt) => { this.handleAspek(evt, index, "Aspek_Perbaikan") }}
                                                    disabled={true}

                                                />
                                            </td>

                                            <td style={{ width: "30%" }}>
                                                <ContentEditable
                                                    html={isi.Laporan_Perbaikan}
                                                    onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
                                                    disabled={true}


                                                />
                                            </td>

                                            <td style={{ width: "40%" }}>
                                                <ContentEditable
                                                    html={isi.Hasil_Verifikasi}
                                                    onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
                                                    disabled={true}


                                                />
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        <div className='table-b my-4 pl-4 pr-5' >
                            <tr>
                                <td style={{ width: "8%" }}>Simpulan&nbsp;:</td>
                                <td >
                                    <ContentEditable
                                        html={this.state.simpulan}
                                        disabled={true}
                                        onChange={(e) => {
                                            this.setState({ simpulan: e.target.value });
                                        }}
                                        tagName="text"

                                    />
                                </td>
                            </tr>
                        </div>
                        <div className='table-b my-4 pl-4 pr-5' >
                            <tr>
                                <td style={{ width: "8%" }}>Rekomendasi&nbsp;:</td>
                                <td >
                                    <ContentEditable
                                        html={this.state.rekomendasi}
                                        disabled={true}
                                        onChange={(e) => {
                                            this.setState({ rekomendasi: e.target.value });
                                        }}
                                        tagName="text"

                                    />
                                </td>
                            </tr>
                        </div>

                    </div>
                    <div className=" ml-5">
                        <p >
                            <strong>
                                Klik tombol Setuju untuk melakukan tanda tangan sebagai tanda bukti menyetujui dokumen laporan diatas
                            </strong>
                        </p>
                        <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
                        </Button>
                    </div>

                </div>


            </ContentWrapper>
        );
    }

}

PlenoSanksi.Layout = BasePage;
export default PlenoSanksi;